import { Component, Prop, Vue } from 'vue-property-decorator'
import styles from './ConfirmPopover.less'

@Component({})
export default class ConfirmPopover extends Vue {
  @Prop({ default: {} }) private operation!: any
  private visible = false
  protected render(h: any) {
    return (
      <span>
        <el-popover
          placement="top-end"
          width="213"
          v-model={this.visible}
          trigger="click"
        >
          <div class={styles.content}>
            <div class={styles.tips}>
              <p>
                <i
                  class="el-icon-warning"
                  style="color:#FAAD14;font-size:14px;"
                />
              </p>
              <p>
                {this.operation.customWarning ||
                  '是否确认进行此操作，您将无法恢复这些数据。'}
              </p>
            </div>
            <el-button
              onClick={() => {
                this.visible = false
              }}
              style="padding: 7px 15px;margin-right: 8px"
            >
              取消
            </el-button>
            <el-button
              type="primary"
              onClick={this.operationClick}
              style="padding: 7px 15px;margin: 0; background:#307BF6;"
            >
              确定
            </el-button>
          </div>
          <el-button slot="reference" type="text">
            {this.operation.text}
          </el-button>
        </el-popover>
      </span>
    )
  }
  private operationClick(operation: any) {
    this.visible = false
    this.$emit('confirm')
  }

  // @Emit("visibleChange")
  // private visibleChange(val: boolean) {
  //   return val;
  // }
}
